import { useState } from 'react'
import { Settings, X, RotateCcw, Eye, EyeOff, Move, Zap } from 'lucide-react'
import { useFloatingAIConfig } from '../hooks/useFloatingAIConfig'

interface FloatingAISettingsProps {
  isOpen: boolean
  onClose: () => void
}

export default function FloatingAISettings({ isOpen, onClose }: FloatingAISettingsProps) {
  const {
    config,
    toggleEnabled,
    toggleAutoHide,
    toggleQuickActions,
    resetConfig
  } = useFloatingAIConfig()

  const [isResetting, setIsResetting] = useState(false)

  const handleReset = async () => {
    setIsResetting(true)
    await new Promise(resolve => setTimeout(resolve, 500)) // 模拟重置动画
    resetConfig()
    setIsResetting(false)
    onClose()
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md animate-in fade-in-0 zoom-in-95 duration-200">
        {/* 头部 */}
        <div className="flex items-center justify-between p-6 border-b border-slate-200">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl flex items-center justify-center">
              <Settings size={20} className="text-white" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-slate-800">悬浮AI设置</h2>
              <p className="text-sm text-slate-500">自定义AI助手行为</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-slate-100 rounded-xl transition-colors"
          >
            <X size={20} className="text-slate-500" />
          </button>
        </div>

        {/* 设置内容 */}
        <div className="p-6 space-y-6">
          {/* 启用/禁用 */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center">
                {config.isEnabled ? <Eye size={16} className="text-green-600" /> : <EyeOff size={16} className="text-slate-400" />}
              </div>
              <div>
                <h3 className="font-medium text-slate-800">显示悬浮球</h3>
                <p className="text-sm text-slate-500">在界面上显示AI助手悬浮球</p>
              </div>
            </div>
            <button
              onClick={toggleEnabled}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                config.isEnabled ? 'bg-blue-600' : 'bg-slate-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform ${
                  config.isEnabled ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>

          {/* 提示信息 */}
          {!config.isEnabled && (
            <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
              <div className="flex items-start gap-2">
                <div className="w-5 h-5 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                  <span className="text-amber-600 text-xs">!</span>
                </div>
                <div>
                  <p className="text-sm text-amber-800 font-medium">悬浮球已隐藏</p>
                  <p className="text-xs text-amber-600 mt-1">
                    要重新显示悬浮球，请打开此设置页面或通过其他页面访问设置
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* 自动隐藏 */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center">
                <Zap size={16} className="text-purple-600" />
              </div>
              <div>
                <h3 className="font-medium text-slate-800">自动隐藏</h3>
                <p className="text-sm text-slate-500">点击外部区域时自动收起</p>
              </div>
            </div>
            <button
              onClick={toggleAutoHide}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                config.autoHide ? 'bg-blue-600' : 'bg-slate-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform ${
                  config.autoHide ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>

          {/* 快速操作 */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center">
                <Move size={16} className="text-orange-600" />
              </div>
              <div>
                <h3 className="font-medium text-slate-800">快速操作</h3>
                <p className="text-sm text-slate-500">展开时显示快速操作按钮</p>
              </div>
            </div>
            <button
              onClick={toggleQuickActions}
              className={`relative w-12 h-6 rounded-full transition-colors ${
                config.showQuickActions ? 'bg-blue-600' : 'bg-slate-300'
              }`}
            >
              <div
                className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow-md transition-transform ${
                  config.showQuickActions ? 'translate-x-6' : 'translate-x-0.5'
                }`}
              />
            </button>
          </div>

          {/* 位置信息 */}
          <div className="p-4 bg-slate-50 rounded-xl">
            <h4 className="font-medium text-slate-800 mb-2">当前位置</h4>
            <div className="text-sm text-slate-600">
              X: {Math.round(config.position.x)}px, Y: {Math.round(config.position.y)}px
            </div>
            <p className="text-xs text-slate-500 mt-1">
              拖拽悬浮球可改变位置
            </p>
          </div>
        </div>

        {/* 底部操作 */}
        <div className="flex items-center justify-between p-6 border-t border-slate-200">
          <div className="flex items-center gap-2">
            <button
              onClick={handleReset}
              disabled={isResetting}
              className="flex items-center gap-2 px-4 py-2 text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-xl transition-colors disabled:opacity-50"
            >
              <RotateCcw size={16} className={isResetting ? 'animate-spin' : ''} />
              {isResetting ? '重置中...' : '重置设置'}
            </button>
            
            {!config.isEnabled && (
              <button
                onClick={() => {
                  toggleEnabled()
                  onClose()
                }}
                className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors"
              >
                <Eye size={16} />
                重新显示悬浮球
              </button>
            )}
          </div>
          
          <button
            onClick={onClose}
            className="px-6 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors"
          >
            完成
          </button>
        </div>
      </div>
    </div>
  )
}
